<!DOCTYPE html>
<html lang="zh-CN" id="html-root">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Studio Proxy Chat</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="webui.css">
</head>

<body>
    <div class="workspace-container">
        <!-- Chat Panel on the Left -->
        <div class="chat-panel">
            <h1>
                <span class="logo">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </span>
                AI Studio Proxy Chat
            </h1>

            <!-- Navigation -->
            <div class="main-nav">
                <button id="nav-chat" class="nav-button active">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="nav-icon">
                        <path
                            d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    聊天
                </button>
                <button id="nav-model-settings" class="nav-button">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="nav-icon">
                        <path
                            d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    设置
                </button>
                <button id="nav-server-info" class="nav-button">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="nav-icon">
                        <path
                            d="M5 12H19M5 12C3.89543 12 3 11.1046 3 10V6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V10C21 11.1046 20.1046 12 19 12M5 12C3.89543 12 3 12.8954 3 14V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V14C21 12.8954 20.1046 12 19 12M7 8H7.01M7 16H7.01"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    其他
                </button>
                <button id="themeToggleButton" title="切换主题">
                    <svg id="darkModeIcon" class="theme-icon" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 3a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1Z" fill="currentColor" />
                        <path d="M12 19a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Z" fill="currentColor" />
                        <path d="M20 12a1 1 0 0 1 1 1 1 1 0 1 1-2 0 1 1 0 0 1 1-1Z" fill="currentColor" />
                        <path d="M4 12a1 1 0 0 1 1 1 1 1 0 1 1-2 0 1 1 0 0 1 1-1Z" fill="currentColor" />
                        <path d="M17.7 6.3a1 1 0 0 1 1.4 0 1 1 0 0 1 0 1.4l-.7.7a1 1 0 0 1-1.4-1.4l.7-.7Z"
                            fill="currentColor" />
                        <path d="M6.3 17.7a1 1 0 0 1 1.4 0 1 1 0 0 1 0 1.4l-.7.7a1 1 0 0 1-1.4-1.4l.7-.7Z"
                            fill="currentColor" />
                        <path d="M17.7 17.7a1 1 0 0 1 0 1.4l-.7.7a1 1 0 0 1-1.4-1.4l.7-.7a1 1 0 0 1 1.4 0Z"
                            fill="currentColor" />
                        <path d="M6.3 6.3a1 1 0 0 1 0 1.4l-.7.7A1 1 0 0 1 4.2 7l.7-.7a1 1 0 0 1 1.4 0Z"
                            fill="currentColor" />
                        <path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" fill="currentColor" />
                    </svg>
                    <svg id="lightModeIcon" class="theme-icon" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M12 18.5c3.59 0 6.5-2.91 6.5-6.5S15.59 5.5 12 5.5 5.5 8.41 5.5 12s2.91 6.5 6.5 6.5Z"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="currentColor" />
                    </svg>
                    
                </button>
            </div>

            <!-- View Container -->
            <div class="view-container">
                <!-- Chat View -->
                <div id="chat-view">
                    <!-- Left Settings Sidebar (starts collapsed, JS will open on desktop) -->
                    <div class="left-settings-sidebar collapsed" id="leftSettingsSidebar">
                        <div class="settings-sidebar-header">
                            <h3>模型设置</h3>
                            <button id="resetModelSettingsButton" class="action-button icon-button" title="重置为默认设置">重置</button>
                        </div>
                        <div class="settings-sidebar-content">
                            <div class="info-card">
                                <h3>系统提示词</h3>
                                <div class="settings-group">
                                    <label for="systemPrompt">系统提示词 (System Prompt):</label>
                                    <textarea id="systemPrompt" class="settings-textarea" rows="4"
                                        placeholder="输入系统提示词..."></textarea>
                                    <div class="settings-description">
                                        系统提示词会在每次对话开始时发送给模型，用于设置模型的行为和角色。
                                    </div>
                                </div>
                            </div>

                            <div class="info-card">
                                <h3>生成参数</h3>
                                <div class="settings-group">
                                    <label for="temperatureValue">温度 (Temperature):</label>
                                    <div class="settings-slider-container">
                                        <input type="range" id="temperatureSlider" class="settings-slider" min="0" max="2" step="0.01" value="1">
                                        <input type="number" id="temperatureValue" class="settings-number" min="0" max="2" step="0.01" value="1">
                                    </div>
                                    <div class="settings-description">
                                        控制生成文本的随机性。值越高，回复越随机；值越低，回复越确定。
                                    </div>
                                </div>

                                <div class="settings-group">
                                    <label for="maxOutputTokensValue">最大输出令牌 (Max Output Tokens):</label>
                                    <div class="settings-slider-container">
                                        <input type="range" id="maxOutputTokensSlider" class="settings-slider" min="1" max="8192" step="1" value="2048">
                                        <input type="number" id="maxOutputTokensValue" class="settings-number" min="1" max="8192" step="1" value="2048">
                                    </div>
                                    <div class="settings-description">
                                        限制模型生成的最大令牌数量。
                                    </div>
                                </div>

                                <div class="settings-group">
                                    <label for="topPValue">Top P:</label>
                                    <div class="settings-slider-container">
                                        <input type="range" id="topPSlider" class="settings-slider" min="0" max="1" step="0.01" value="0.95">
                                        <input type="number" id="topPValue" class="settings-number" min="0" max="1" step="0.01" value="0.95">
                                    </div>
                                    <div class="settings-description">
                                        控制文本生成的多样性。值越低，生成的文本越集中于高概率词汇。
                                    </div>
                                </div>

                                <div class="settings-group" id="thinkingModeGroup">
                                    <label for="enableThinkingToggle">思考模式 (Thinking Mode):</label>
                                    <input type="checkbox" id="enableThinkingToggle">
                                    <div class="settings-description">
                                        关闭则不使用思考模式；开启时可选择"思考等级"或设置"思考预算"。
                                    </div>
                                </div>

                                <div class="settings-group" id="thinkingLevelGroup">
                                    <label for="thinkingLevelSelector">思考等级 (Thinking Level):</label>
                                    <select id="thinkingLevelSelector" class="settings-input">
                                        <option value="">未指定</option>
                                        <option value="low">Low</option>
                                        <option value="high">High</option>
                                    </select>
                                    <div class="settings-description">
                                        对于使用"思考等级"的模型（如 Gemini 3 Pro Preview），这里的选择将被优先使用。
                                    </div>
                                </div>

                                <div class="settings-group" id="manualBudgetGroup">
                                    <label for="enableManualBudgetToggle">限制思考预算 (Manual Budget):</label>
                                    <input type="checkbox" id="enableManualBudgetToggle">
                                    <div class="settings-description">
                                        打开以手动限制思考预算；关闭则不限制预算。
                                    </div>
                                </div>

                                <div class="settings-group" id="thinkingBudgetGroup">
                                    <label for="thinkingBudgetValue">思考预算 (Thinking Budget):</label>
                                    <div id="thinkingBudgetControlsContainer" class="settings-slider-container">
                                        <input type="range" id="thinkingBudgetSlider" class="settings-slider" min="128" max="32768" step="1" value="8192">
                                        <input type="number" id="thinkingBudgetValue" class="settings-number" min="128" max="32768" step="1" value="8192">
                                    </div>
                                    <div class="settings-description">
                                        对于使用预算的模型，设定具体的思考 Token 数。若同时指定"思考等级"，将优先使用等级。
                                    </div>
                                </div>

                                <div class="settings-group">
                                    <label for="stopSequences">停止序列 (Stop Sequences):</label>
                                    <input type="text" id="stopSequences" class="settings-input" placeholder="用逗号分隔多个停止序列">
                                    <div class="settings-description">
                                        模型遇到这些序列时会停止生成。多个序列用逗号分隔。
                                        <br>留空表示使用服务器默认值。
                                    </div>
                                </div>
                            </div>

                            <div class="info-card">
                                <h3>工具</h3>
                                <div class="settings-group">
                                    <label for="enableGoogleSearchToggle">Grounding with Google Search</label>
                                    <input type="checkbox" id="enableGoogleSearchToggle">
                                    <div class="settings-description">启用搜索作为工具以改进事实性。</div>
                                </div>
                            </div>

                            <div class="info-card">
                                <h3>设置保存状态</h3>
                                <div id="settings-status" class="settings-status">
                                    参数设置将自动应用于聊天，并保存在本地浏览器中。
                                </div>
                                <button id="saveModelSettingsButton" class="action-button full-width-button">保存设置</button>
                            </div>
                        </div>
                    </div>

                    <!-- Chat Area -->
                    <div class="chat-main-area">
                        <div id="chatbox">
                            <!-- Chat messages will be appended here -->
                        </div>
                        <div id="input-area">
                            <div class="model-selector-container">

                                <select id="modelSelector"></select>
                                <button id="refreshModelsButton" title="刷新模型列表">刷新</button>
                            </div>
                            <textarea id="userInput" placeholder="输入消息... (Shift+Enter 换行)" rows="1"></textarea>
                            <button id="clearButton" class="action-button">清空</button>
                            <button id="sendButton" class="action-button">发送</button>
                        </div>
                    </div>

                    <!-- Left Sidebar Toggle Button -->
                    <button id="toggleLeftSidebarButton" class="left-sidebar-toggle" title="展开/收起设置">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>

                <!-- Server Info View (hidden by default) -->
                <div id="server-info-view">
                    <div class="server-info-header">
                        <h3>服务器状态与 API 信息</h3>
                        <button id="refreshServerInfoButton" class="action-button" title="刷新状态">刷新</button>
                    </div>

                    <div id="api-info-area" class="info-card">
                        <h3>API 调用信息</h3>
                        <div id="api-info-content">
                            <div class="loading-indicator">
                                <div class="loading-spinner"></div>
                                <span>正在加载 API 信息...</span>
                            </div>
                        </div>
                    </div>

                    <div id="health-status-area" class="info-card">
                        <h3>服务健康检查状态</h3>
                        <div id="health-status-display">
                            <div class="loading-indicator">
                                <div class="loading-spinner"></div>
                                <span>正在加载健康状态...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Model Settings View (hidden by default) - Now only API Key Management -->
                <div id="model-settings-view">
                    <div class="server-info-header">
                        <h3>API 密钥管理</h3>
                    </div>

                    <!-- API密钥管理区域 -->
                    <div class="info-card">
                        <div class="settings-group">
                            <div class="api-key-status" id="apiKeyStatus">
                                <div class="loading-indicator">
                                    <div class="loading-spinner"></div>
                                    <span>正在检查API密钥状态...</span>
                                </div>
                            </div>

                            <div class="api-key-input-group">
                                <label for="newApiKey">验证API密钥:</label>
                                <div class="api-key-input-container">
                                    <input type="password" id="newApiKey" class="settings-input" placeholder="输入要验证的API密钥...">
                                    <button id="toggleApiKeyVisibility" class="icon-button" title="显示/隐藏密钥">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </button>
                                </div>
                                <div class="api-key-actions">
                                    <button id="testApiKeyButton" class="action-button">验证密钥</button>
                                </div>
                            </div>

                            <div class="api-key-list" id="apiKeyList">
                                <!-- 现有密钥列表将在这里显示 -->
                            </div>

                            <div class="settings-description">
                                <strong>说明:</strong>
                                <ul>
                                    <li>支持标准的 OpenAI 格式: <code>Authorization: Bearer &lt;your_key&gt;</code></li>
                                    <li>也支持自定义格式: <code>X-API-Key: &lt;your_key&gt;</code></li>
                                    <li>输入的密钥会自动保存到浏览器本地存储，刷新页面后无需重新输入</li>
                                    <li>此界面用于验证密钥有效性和查看服务器密钥状态</li>
                                    <li>验证成功后可查看服务器上配置的密钥列表（打码显示）</li>
                                    <li>对话功能将使用您输入验证的密钥，不会使用服务器密钥</li>
                                    <li>如需添加密钥到服务器，请联系管理员或直接编辑服务器配置</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="info-card">
                        <div class="settings-description">
                            <strong>提示:</strong> 其他模型设置（温度、系统提示词等）已移至聊天页面的左侧边栏，方便您在聊天时快速调整。
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Sidebar Panel on the Right (Now only for Logs) -->
        <div class="sidebar-panel collapsed" id="sidebarPanel">
            <div id="log-area">
                <div id="log-area-header">
                    <span>系统终端输出日志</span>
                    <button id="clearLogButton" class="action-button icon-button" title="清空日志">清理</button>
                </div>
                <div id="log-terminal-wrapper">
                    <div id="log-terminal">
                        <!-- Log entries will be appended here -->
                    </div>
                </div>
                <div id="log-status" class="log-status">[Log Status] 等待连接...</div>
            </div>
        </div>

        <button id="toggleSidebarButton" title="展开/收起日志">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                <line x1="7" y1="8" x2="17" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="7" y1="12" x2="17" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="7" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </button>

    </div>

    <script src="webui.js" defer></script>
</body>

</html>
